<template>
	<view class="">
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view class="picker-calendar-view" v-for="(date,dateIndex) in calendar" :key="dateIndex"
					@click="onSelectDate(date,dateIndex)">
					<!-- 背景样式 -->
					<view v-show="date.bgStyle.type" :class="'picker-calendar-view-'+date.bgStyle.type"
						:style="{background: date.bgStyle.background}"></view>
					<!-- 正常和选中样式 -->
					<view class="picker-calendar-view-item"
						:style="{opacity: date.statusStyle.opacity, color: date.statusStyle.color, background: date.statusStyle.background,borderRadius:date.statusStyle.borderRadius}">
						<text>{{date.title}}</text>
					</view>
				</view>
		</scroll-view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				calendar: [{
					bgStyle: {
						type: '',
						background: 'transparent'
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '00'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent'
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '01'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '02'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '03'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '04'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '05'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '06'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '07'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '08'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '09'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '10'
				}],
				changeNumList: [],
				oldDataList:[]
			}
		},
		methods: {
			procCalendar() {
				this.calendar = [{
					bgStyle: {
						type: '',
						background: 'transparent'
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '00'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent'
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '01'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '02'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '03'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '04'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '05'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '06'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '07'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '08'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '09'
				}, {
					bgStyle: {
						type: '',
						background: 'transparent',
						borderRadius: ''
					},
					statusStyle: {
						opacity: 1,
						color: '#000',
						background: 'transparent',
						borderRadius: ''
					},
					title: '10'
				}]
			},

			onSelectDate(val, index) {
				this.calendar[index].statusStyle.color = '#fff';
				this.calendar[index].statusStyle.background = 'rgb(64, 158, 255)';
				this.calendar[index].statusStyle.borderRadius = '50%';
				this.calendar[index].bgStyle.background = 'rgb(64, 158, 255)'
				if (this.changeNumList.length == 2) {
					this.changeNumList = [];
					this.procCalendar();
					this.calendar[index].statusStyle.color = '#fff';
					this.calendar[index].statusStyle.background = 'rgb(64, 158, 255)';
					this.calendar[index].bgStyle.background = 'rgb(64, 158, 255)';
					this.calendar[index].statusStyle.borderRadius = '50%';
					this.changeNumList.push(index)
				} else {
					this.changeNumList.push(index)
				}

				if (this.changeNumList.length == 2) {
					this.changeNumList.sort((a, b) => a - b); //从小到大排序
					this.calendar.forEach((item, index) => {
						if (index > this.changeNumList[0] && index < this.changeNumList[1]) {
							item.statusStyle.color = '#fff';
							item.statusStyle.background = 'rgba(64, 158, 255,.5)'
							item.bgStyle.type = 'rang';
							item.statusStyle.borderRadius = 'inherit'
						} else if (index == this.changeNumList[1]) {
							item.bgStyle.type = 'rbgend';
						} else if (index == this.changeNumList[0]) {
							item.bgStyle.type = 'bgend';
						}
					})
				}


				console.log(this.changeNumList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_H{
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	.picker-calendar-view {
		position: relative;
		width: 45px;
		height: 45px;
		text-align: center;
		display: inline-block;
		.picker-calendar-view-rang {
			left: 0;
			top: 10%;
			width: 100%;
			background: rgba(64, 158, 255, .5) !important;
			// border-radius: inherit;
		}

		.picker-calendar-view-bgend {
			border-radius: 45px 0 0 45px !important;
			top: 5% !important;
			left: 14% !important;
			width: 90% !important;
			/* opacity: .15; */
			height: 90% !important;
			position: absolute !important;
			background: rgba(64, 158, 255, .5) !important;
		}

		.picker-calendar-view-rbgend {
			border-radius: 0 45px 45px 0 !important;
			top: 5% !important;
			left: 5% !important;
			width: 90% !important;
			/* opacity: .15; */
			height: 90% !important;
			position: absolute !important;
			background: rgba(64, 158, 255, .5) !important;
		}

		.picker-calendar-view-item {
			left: 5%;
			top: 5%;
			width: 100%;
			height: 90%;
			-webkit-border-radius: 45px;
			border-radius: 45px;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			position: absolute;
			z-index: 11;

		}
	}
</style>
